let v = new Vue({
    el:'#main-container',
    data:function () {
        return {
            settings:{
                data:{
                    simpleData: {
                        enable:true,
                        pIdKey:'parentId'
                    }
                },
                callback:{
                    onClick:this.onClick,
                    // beforeEditName:this.beforeEditName
                },
                view:{
                    fontCss:this.fontCss
                    // addHoverDom:this.addHoverDom,
                    // removeHoverDom:this.removeHoverDom
                },
                // edit:{
                //     enable: true
                // },
            },
            nodes:[],
            rid:'',
            oid:'',
            choosedUser:[],
            delFlag:false,
            delUserIds:[],
            unChooseUser:[],
            addFlag:false,
            addUserIds:[],
        }
    },
    methods:{
        initTree:function () {
            axios({
                url:'manager/office/list',
                method: 'get'
            }).then(resp => {
                this.nodes = resp.data.obj;
                // this.nodes[this.nodes.length] = {id:0,name:'机构列表',open:true};
                let treeObj = $.fn.zTree.init($("#treeOffice"),this.settings,this.nodes)
                console.log(treeObj);
            }).catch(error => {
                console.log(error);
            });
        },
        onClick: function (event, treeId, treeNode) {
            let tree = $.fn.zTree.getZTreeObj('treeOffice');
            let notes = tree.transformToArray(tree.getNodes());
            let needNotes = tree.getNodesByParamFuzzy("name",treeNode.name,null);
            for (let i in notes) {
                notes[i].hightLight = false;
                tree.updateNode(notes[i]);
            }
            for (let i in needNotes) {
                for(let j in notes){
                    if(needNotes[i].id == notes[j].id){
                        notes[j].hightLight = true;
                        tree.updateNode(notes[j]);
                        break;
                    }
                }
            }
            this.oid = treeNode.id;
            this.getUnChoose();
        },
        getUnChoose:function(){
            axios({
                url:'manager/role/getUnChoose',
                params:{oid:this.oid,rid:this.rid}
            }).then(resp => {
                this.unChooseUser = resp.data.obj;
                for (let i in this.unChooseUser) {
                    this.unChooseUser[i].show = false;
                }
            }).catch(error => {
                layer.msg(error.message);
            })
        },
        fontCss:function (treeId,treeNode) {
            return treeNode.hightLight?{color:'red'}:{color:'black'};
        },
        selectByRoleId:function () {
            axios({
                url:'manager/role/getChoosed',
                params:{rid:this.rid}
            }).then(resp => {
                this.choosedUser = resp.data.obj;
                for (let i in this.choosedUser) {
                    this.choosedUser[i].show = false;
                }
            }).catch(error => {
                layer.msg(error.message);
            })
        },
        delCheckBox:function (id) {
            for (let i in this.choosedUser) {
                if(this.choosedUser[i].id == id){
                    this.choosedUser[i].show = !this.choosedUser[i].show;
                    if(this.choosedUser[i].show){
                        this.delUserIds.push(this.choosedUser[i].id);
                    }else{
                        for (let j in this.delUserIds) {
                            if(this.delUserIds[j] == this.choosedUser[i].id){
                                this.delUserIds.splice(j,1);
                                break;
                            }
                        }
                    }
                }
                if(this.delUserIds.length > 0){
                    this.delFlag = true;
                }else {
                    this.delFlag = false;
                }

            }
        },
        removeChoosed:function () {
            axios({
                url:'manager/role/delByIds',
                params:{rid:this.rid,ids:this.delUserIds + ''}
            }).then(resp => {
                this.selectByRoleId();
                this.getUnChoose();
                this.delFlag = false;
                this.delUserIds = [];
            }).catch(error => {
                layer.msg(error.message);
            })
        },
        addCheckBox:function(id){
            for (let i in this.unChooseUser) {
                if(this.unChooseUser[i].id === id){
                    this.unChooseUser[i].show = !this.unChooseUser[i].show;

                    if(this.unChooseUser[i].show){
                        this.addUserIds.push(id);
                    }else{
                        for (let j in this.addUserIds) {
                            if(this.addUserIds[j] === id){
                                this.addUserIds.splice(j,1);
                            }
                        }
                    }
                }
            }
            if(this.addUserIds.length > 0){
                this.addFlag = true;
            }else {
                this.addFlag = false;
            }
        },
        addUsers:function () {
            axios({
                url:'manager/role/addUsers',
                params:{rid:this.rid,ids:this.addUserIds + ''}
            }).then(resp => {
                this.selectByRoleId();
                this.getUnChoose();
                this.addFlag = false;
                this.addUserIds = [];
            }).catch(error => {
                layer.msg(error.message);
            })
        }
    },
    created:function () {
        this.rid = parent.layer.rid;
        this.selectByRoleId();
    },
    mounted:function () {
        this.initTree();
    }
})